<template>
  <div
    :style="`background: url('../src/assets/${background}.jpg');background-repeat: no-repeat;background-size: 100% 100%;`"
  >
    <router-view v-slot="{ Component }">
      <transition :name="_this.$store.state.transition" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">

import { onMounted, getCurrentInstance, computed, ComponentInternalInstance } from 'vue'
import { consoleRGB } from './util/util';

// this
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// set Background
// if you know 'Vuex-persistedstate', you can replace it;
const bgValue = localStorage.getItem('background');
if (bgValue) _this.$store.commit('setBackground', bgValue);
let background = computed(() => {
  return _this.$store.state.background;
})

onMounted(async (): Promise<void> => {
  consoleRGB("Nymo", "Wudong", "Projcet");
})

</script>

<style lang="scss" scoped>
</style>
